<extend name="Public/base"/>

<block name="body">
        <h2 style="margin-left:400px">添加商品</h2>
    <form action="{:U('add')}" method="post" class="form-horizontal" enctype="multipart/form-data" style="width:40%;float:left">
      <!-- 商品分类 ，需要对商品分类进行遍历-->
      <div class="controls">
          <label class="item-label">商品分类:<span class="check-tips">(请选择商品分类 . 必选)</span></label>
          <select name="classify_id" id="sel" style="width:400px;border:0px">

            <option value="0" >--请选择--</option>

            <foreach name="Cdata" item="vo" >
              <if condition="$vo.num eq 3 ">
                <option value="{$vo.id}" >{$vo.name}</option>
                <else /> 
                <option value="{$vo.id}" disabled="true">{$vo.name}</option>
              </if>
            </foreach>
  
          </select>
          <span id="create"></span>
      </div>
      <!-- 型号填写 -->
        <div class="form-item">
            <label class="item-label">型号<span class="check-tips">(请输入商品型号.英文和数字)</span></label>
            <div class="controls">
                <input type="text" id="type" class="text input-large number" name="number" placeholder="请输入商品型号"><span id="num"></span>
            </div>
        </div>
        <div class="form-item">
            <label class="item-label">商品名<span class="check-tips">(请输入商品名)</span></label>
            <div class="controls">
                <input type="text" id="type" class="text input-large name" name="name" placeholder="请输入商品型号"><span id="nam"></span>
            </div>

        </div>
        <!-- 颜色添加 -->
        <div class="controls">
          <!-- 颜色选择 -->
            <span>
              <b>颜色:</b>
              <input type="text" class="colo" name="color" style="width:70px">
            </span>
            <span >
                  <span ><b>价格:</b></span>
                  <input type="text" name="price" placeholder="请输入价格" class="text price" style="width:150px">元
                  <span id="pri"></span>
            </span>            
        </div>
        <div id="col"></div>
          <!-- 尺码选择 -->
        <div class="addsize" style="margin:10px 0">
            <span>
                <b>尺码:</b>
                <select class="select" name="details[]" style="border:none;">
                  <option value="0" >--请选择--</option>

                  <foreach name="Ddata" item="vol" >
                    <option value="{$vol.details_id}" >{$vol.size}</option>
                  </foreach>

                </select>
            </span>
            <span>
                <span><b>数量:</b></span>
                <input type="text" name="store[]"  placeholder="请输入数量" style="border:none;width:150px" class="text store" >件

            </span>
            <a href="javascript:" class="del" style="padding:auto 5px;border-radius:3px;border:1px solid #AAA;">一</a>
            <span class="sto"></span>
            <div class="MLX"></div>
        </div>
        <!-- 价格添加 -->
        <a href="javascript:" id="addgoods" style="display:block;text-decoration:none;padding:3px 15px;border-radius:10px;border:1px solid #AAA;width:200px;text-align:center;margin:15px 50px">+点击添加尺码及数量</a>
        <!-- 上传商品图片 -->
        <div class="controls">
              <ul id="warp">
                <li>
                  <label class="item-label" style="margin:20px 0">商品图片预览<span class="check-tips">(请选择选择上传的商品图片,默认预览第一张)</span></label>
                  <input type="file" id="up_img_WU_FILE_0" class="text input-large img" name="picture[]" multiple="multiple" style="border:none;"/>
                </li>
              </ul>
        </div>
        <!-- 确定和重置按钮 -->
        <div class="form-item" style="margin:35px">
            <input class="btn submit-btn " id="submit" type="submit" value="确定添加">
            <input class="btn btn-return" type="reset" value="放弃添加"> 
        </div>
    </form>

    <div style="width:55%;height:450px;border:1px solid #AAA;float:right;margin-top:20px">
      <img id="imgShow_WU_FILE_0" height="100%" style="display:block;margin:0 auto"/><br>
    </div>
    <div style="clear:both;"></div>
</block>

<block name="script">
  <!-- 引入上传预览的图片JS代码 -->
    <script src="__PUBLIC__/Admin/js/uploadPreview.js"></script>
    <script type="text/javascript">
     highlight_subnav('{:U('Goods/showlist')}');
      // 找到对象，绑定点击事件
        $('#addgoods').click(function(){
          // 点击克隆他前面的元素，但只克隆第一个
          $(this).before($('.addsize').clone(1).eq(0));
        });
    </script>
  

    <script>
      $(function(){
        ok3=false;
        ok4=false;
        ok5=false;
        ok6=false;
        ok7=false;
        ok8=false;
        ok9=false;

        //删除按钮
        $('.del').click(function(){
   
          if ($('.del').length > 1) {
            $(this).parent().remove();
          }

        });

        //数量
        $('.store').blur(function(){
          var str = $(this).val();
          if (str == 0) {
              $(this).parent().next().next().html('*不能为空').css('color' , 'red');
          }else{
              var reg = /^[0-9]*[1-9][0-9]*$/;
              if(!reg.test(str)){
                  $(this).parent().next().next().html('*数字').css('color' , 'red');
              }else{
                  $(this).parent().next().next().html('');
                  ok3 = true;
              }
          }

        });

        
        
        // 验证分类选项
        $('#sel').blur(function(){

          if ($('#sel').val() == 0) {
            $('#create').html('*必选').css('color' , 'red');
          }else{
             $('#create').html('');
             ok4 = true;
          }

        });

        // 验证尺码选项
        $('.select').blur(function(){
          if ($('.select').val() == 0) {
            $(this).parent().next().next().next().html('*尺码必选').css('color' , 'red');
          }else{
             $(this).parent().next().next().next().html('');
             ok5 = true;
          }

        });

        // 验证类型
        $('.number').blur(function(){
          var str = $('.number').val();
          if (str == 0) {
              $('#num').html('*内容不能为空').css('color' , 'red');
          }else{

              var reg = /^[A-Za-z0-9_-]+$/;
              if(!reg.test(str)){
                  $('#num').html('*英文和数字').css('color' , 'red');
              }else{
                  $('#num').html('');
                  ok6 = true;
              }
          }

        });

        // 验证商品名
        $('.name').blur(function(){
          var str = $('.name').val();
          if (str == 0) {
              $('#nam').html('*内容不能为空').css('color' , 'red');
          }else{
              $('#nam').html('');
              ok7 = true;
          }

        });

        // 验证颜色
        $('.colo').blur(function(){
          var str = $('.colo').val();
          if (str == 0) {
              $('#col').html('*内容不能为空').css('color' , 'red');
          }else{
              var reg = /^[\u4e00-\u9fa5]+$/;
              if(!reg.test(str)){
                  $('#col').html('*只能是中文').css('color' , 'red');
              }else{
                  $('#col').html('');
                  ok8 = true;
              }
          }

        });

        // 验证价格
        $('.price').blur(function(){
          var str = $('.price').val();
          if (str == 0) {
              $('#pri').html('*内容不能为空').css('color' , 'red');
          }else{
              var reg = /^[0-9]*[1-9][0-9]*$/;
              if(!reg.test(str)){
                  $('#pri').html('*只能是数字').css('color' , 'red');
              }else{
                  $('#pri').html('');
                  ok9 = true;
              }
          }

        });

        //验证提交按钮
        $("#submit").click(function(){

          var file=$("#up_img_WU_FILE_0");
            if($.trim(file.val())==''){
               alert("请选择文件");
               return false;     
             }
          if(ok3 && ok4 && ok5 && ok6 && ok7 && ok8 && ok9 ){

          }else{
              return false;
          }
        });

    });


    </script>
</block>
